<template>
  <div class="recycle_content">
    <div class="content_l">
      <vxe-table
        highlight-current-row
        highlight-hover-row
        row-key
        :show-header="false"
        show-overflow
        ref="xTree"
        border="inner"
        :data="siteList"
        :tree-config="{
          children: 'children',
          transform: false,
          parentKey: 'parentId',
          line: true,
          iconOpen: 'el-icon-remove',
          iconClose: 'el-icon-circle-plus',
        }"
        class="left-table"
      >
        <vxe-column tree-node show-overflow>
          <template #default="{ row }">
            <span>
              <!-- <img src="../../../assets/icons/png/contextMenu.gif" alt=""> -->
              <!-- <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
               -->
              <img
                src="../../../assets/icons/png/folderopen.gif"
                alt=""
                style="vertical-align: text-bottom"
                @click.stop="openMenu(row, $event)"
                v-if="$refs.xTree.isTreeExpandByRow(row)"
              />

              <img
                src="../../../assets/icons/png/folder.gif"
                alt=""
                style="vertical-align: text-bottom"
                @click.stop="openMenu(row, $event)"
                v-if="!$refs.xTree.isTreeExpandByRow(row)"
              />

              <span
                @click="clickListRow(row)"
                style="cursor: pointer; fontsize: 12px; color: #000"
              >
                {{ row.name }}</span
              >
            </span>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="content_r">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane
          :label="`回收站栏目信息(${recycleInfo.channelNum})`"
          lazy
          name="two"
        >
          <Two :siteRow="siteRow" v-if="activeName == 'two'"></Two>
        </el-tab-pane>
        <el-tab-pane
          :label="`回收站文章信息(${recycleInfo.articleNum})`"
          lazy
          name="three"
        >
          <Three :siteRow="siteRow" v-if="activeName == 'three'"></Three>
        </el-tab-pane>
        <el-tab-pane
          :label="`回收站模板信息(${recycleInfo.templateNum})`"
          lazy
          name="four"
        >
          <Four :siteRow="siteRow" v-if="activeName == 'four'"></Four>
        </el-tab-pane>

        <el-tab-pane
          :label="`回收站文件库(${recycleInfo.templateNum})`"
          lazy
          name="four"
          v-if="false"
        >
          <File :siteRow="siteRow" v-if="activeName == 'file'"></File>
        </el-tab-pane>
        <el-tab-pane
          :label="`回收站站点信息(${recycleInfo.siteNum})`"
          lazy
          name="one"
          v-if="!siteRow"
        >
          <One :siteRow="siteRow" v-if="activeName == 'one'"></One>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getRecycleInfo, siteTreeList } from "@/api/content/recyclingStation";
import One from "./components/one";
import Two from "./components/two";
import Three from "./components/three";
import Four from "./components/four";
export default {
  name: "recyclingStation",
  data() {
    return {
      recycleInfo: {
        siteNum: 0,
        templateNum: 0,
        articleNum: 0,
        channelNum: 0,
      },
      activeName: null,
      siteList: [],
      siteRow: {},
    };
  },

  components: { One, Two, Three, Four },

  computed: {},
  created() {
    this.getSiteList();
  },
  mounted() {},

  methods: {
    getSiteList() {
      siteTreeList()
        .then((res) => {
          this.siteList = [
            { name: "WYCMS主站", root: "000", children: res.data },
          ];
          this.siteRow = res.data[0];
        })
        .then(() => {
          this.RecycleInfo();
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
            this.$refs.xTree.setCurrentRow(this.siteList[0].children[0]);
          });
        });
    },
    RecycleInfo() {
      getRecycleInfo({ siteId: this.siteRow?.siteId || this.CONSTANCE.siteId })
        .then((res) => {
          this.recycleInfo = res.data;
        })
        .then(() => {
          this.activeName = "two";
        });
    },
    clickListRow(row) {
      this.activeName = null;
      this.siteRow = row.root ? null : row;

      this.RecycleInfo();
    },
  },
};
</script>

<style scoped lang="scss">
.recycle_content {
  height: 100%;
  display: flex;
  .content_l {
    width: 240px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      min-width: 240px;
    }
  }
  .content_r {
    flex: 1;
    width: 0;
  }
}
::v-deep .el-tabs__content {
  height: calc(100% - 40px);
  overflow: auto;
  .el-tab-pane {
    height: 100%;
    .columninfom {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
